<template>

	<view class="box" :style="{'background-image': 'url('+biyingImg+')'}">
		<view class="hader">
			<view>
				<u-icon @click="retreat" name="arrow-left" size="48"></u-icon>
			</view>
			<view>{{ this.target }}</view>
			<view>
				<image @click="haderPortrait" :src="
            image ||
            'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=1d379f0aa044ad342ebf878fe0a30c08/19febb13b07eca80e92c0400902397dda044831f.jpg'
          " mode=""></image>
			</view>
		</view>

		<view class="chastConeter">
			<!-- <text>11月14号 11:37</text> -->
			<view v-for="(item, index) in msgData" :key="index" @click="atPresent(item)">
				<view class="information mysned" v-if="item.userUUID == userUUID">
					<view class="boxconet" v-if="item.msgType === 'character'">
						<view class="txt">
							{{ item.data }}
						</view>
						<image class="userimg" @click="haderPortrait" :src="
                image ||
                'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=1d379f0aa044ad342ebf878fe0a30c08/19febb13b07eca80e92c0400902397dda044831f.jpg'
              "></image>
					</view>

					<view class="boxconet" v-if="item.msgType === 'img'">
						<view class="information">
							<image class="msg_img" :src="item.data" mode=""></image>
							<image class="userimg" @click="haderPortrait" :src="
                  image ||
                  'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=1d379f0aa044ad342ebf878fe0a30c08/19febb13b07eca80e92c0400902397dda044831f.jpg'
                "></image>
						</view>
					</view>
					<view class="boxconet" v-if="item.msgType === 'video'">
						<view class="information">
							<video id="myVideo"
								src="http://192.168.1.107:8978/pudate/1613377893961-mda-kfaq4eefukn2rbh7.mp4"></video>
							<image class="userimg" @click="haderPortrait" :src="
                  image ||
                  'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=1d379f0aa044ad342ebf878fe0a30c08/19febb13b07eca80e92c0400902397dda044831f.jpg'
                "></image>
						</view>
					</view>
				</view>
				<view v-else class="information">
					<view class="boxconet" v-if="item.msgType === 'character'">
						<image class="userimg" @click="haderPortrait" :src="
                image ||
                'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=1d379f0aa044ad342ebf878fe0a30c08/19febb13b07eca80e92c0400902397dda044831f.jpg'
              "></image>
						<view class="txt">
							{{ item.data }}
						</view>
					</view>
					<view class="boxconet" v-if="item.msgType === 'img'">
						<view class="information">
							<image class="userimg" @click="haderPortrait" :src="
                  image ||
                  'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=1d379f0aa044ad342ebf878fe0a30c08/19febb13b07eca80e92c0400902397dda044831f.jpg'
                "></image>
							<image class="msg_img" :src="item.data" mode=""></image>
						</view>
					</view>
					<view class="boxconet" v-if="item.msgType === 'video'">
						<view class="information">
							<image class="userimg" @click="haderPortrait" :src="
                  image ||
                  'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=1d379f0aa044ad342ebf878fe0a30c08/19febb13b07eca80e92c0400902397dda044831f.jpg'
                "></image>
							<video id="myVideo"
								src="http://192.168.1.107:8978/pudate/1613377893961-mda-kfaq4eefukn2rbh7.mp4"></video>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="hader">
			<view>
				<u-icon @click="haderPush" name="mic" size="48"></u-icon>
			</view>
			<view class="sendData">
				<u-input maxlength="10000" v-model="mobile" @focus="focus" />
			</view>
			<view class="inco">
				<u-icon @click="submit" name="arrow-rightward" size="48"></u-icon>
			</view>
			<!-- 	<view class="inco">
				<u-icon  name="photo-fill" size="48"></u-icon>
			</view> -->
			<view class="inco">
				<u-icon @click="morePush" name="plus-circle" size="48"></u-icon>
			</view>
		</view>
		<view class="morelist" v-if="ismore">
			<view>
				<u-icon @click="morePush" name="camera" size="68"></u-icon>
			</view>
			<view>
				<u-icon @click="morePush" name="scan" size="68"></u-icon>
			</view>
			<view>
				<u-icon @click="haderLookFor" name="attach" size="68"></u-icon>
			</view>
			<view>
				<u-icon @click="haderLookFor" name="photo-fill" size="68"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getState
	} from "../../../../../store";
	export default {
		name: "chatHader",
		data() {
			return {
				target: "",
				image: "",
				mobile: "",
				ismore: false,
				msgData: [],
				userUUID: "",
				biyingImg: '',
			};
		},
		onPullDownRefresh() {
			this.historyMsgData();
		},
		onLoad(pares) {
			this.newbingimg();
			this.target = pares.uuSendId;
			// this.initSocket();
			let usermali;
			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					usermali = res.data.usermali
				}
			});
			this.userUUID = usermali;
			// //建立连接
			// this.socket.emit('NewUserAdd', this.userUUID);
			uni.getLocation({
				type: "wgs84",
				success: (res) => {
					console.log("当前位置的经度：" + res.longitude);
					console.log("当前位置的纬度：" + res.latitude);
				},
			});

			this.historyMsgData();

		},

		methods: {
			//历史聊天记录
			async historyMsgData() {
				let data = await this.http(this.api.DirectionalMessage, {
					toPut: this.target,
				});
				this.msgData = data;
				uni.stopPullDownRefresh();
			},
			initSocket() {
				// 新人进来了聊天

				// this.socket.emit('NewUserAdd', this.userUUID);
				// console.log(this.socket)
				//接收
				this.socket.on("receive private message", (data) => {
					this.msgData.push(data);
					this.showDataEnd(500);
				});
				// console.log(this.msgData);
				// // 发生数据Node服务器  message 跟Node 一样
				// socket.emit('message', userName); //推送用户账号给后端socket
				// // 接收数据Node服务器  send 跟Node 一样
				// socket.on('send', (data) => {
				// console.error(data);
				// });
			},
			submit() {
				this.sendData(this.mobile, "character");
			},
			haderPortrait() {
				this.$emit("haderPortrait");
			},
			haderLookFor() {
				let _this = this;
				uni.chooseImage({
					//选择图片
					count: 9,
					sizeType: ["compressed"],
					success(res) {
						let img = [];
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							let obj = new Object();
							obj.name = `file` + i;
							obj.uri = res.tempFilePaths[i];
							img.push(obj);
							obj = null;
						}
						_this.httpFile(_this.api.files, img).then((res) => {
							console.log(res);
							res.forEach((item) => {
								const userName = {
									userUUID: _this.userUUID, //获取登录缓存的用户
									toPut: _this.target,
									data: `http://localhost:8978${item}`,
									msgType: item.includes(".mp4") ? "video" : "img",
									// msgType:'图片,文字,视频，音频,其他文件'
								};
								_this.sendData(
									userName.data,
									item.includes(".mp4") ? "video" : "img"
								);
							});
						});
						_this.ismore = false;
					},
				});
			},
			morePush() {
				this.ismore = true;
				setTimeout(() => {
					window.scrollTo(0, document.body.scrollHeight);
				}, 500);
			},
			sendData(data, type) {
				// img , video,Audio,character,flie
				if (data && type) {
					const userName = {
						userUUID: this.userUUID, //获取登录缓存的用户
						toPut: this.target,
						data,
						msgType: type,
						date: this.Public.currentTime(),
						// msgType:'图片,文字,视频，音频,其他文件'
					};
					//单独发消息给某个人
					this.msgData.push(userName),
						this.socket.emit("send private message", userName),
						(this.mobile = ""),
						//scrollIntoView 显示到可视区
						this.showDataEnd();
				}
			},
			focus() {
				this.ismore = false;
			},
			retreat() {
				this.$router.go(-1);
			},
			showDataEnd(istime) {
				document.querySelector(".chastConeter")?.lastChild?.scrollIntoView(false);
				istime &&
					setTimeout(() => {
						document
							.querySelector(".chastConeter")
							?.lastChild?.scrollIntoView(false);
					}, istime);
			},
			// 当前点击的消息
			atPresent(data) {
				uni.previewImage({
					urls: [data.data],
					current: 1,
					loop: true,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {
							console.log(
								"选中了第" +
								(data.tapIndex + 1) +
								"个按钮,第" +
								(data.index + 1) +
								"张图片"
							);
						},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
				});
			},
			async newbingimg() {
				let [list] = await this.http(this.api.newbingimg);
				const {
					url
				} = list;
				this.biyingImg = url;
				console.log(url);
			},
		},
	};
</script>

<style scoped lang="less">
	@import "../../../../../static/css/common.less";

	.morelist {
		width: 100%;
		height: 20vh;
		background-color: #e5e5e5;
		display: flex;

		view {
			width: 25%;
			height: 10vh;
			display: flex;
			justify-content: center;
		}
	}

	.box {
		// background-color: #f3f3f3;
		background-size: 100% 100%;
		background-attachment: fixed;
		background-attachment: fixed;
		background-color: #fff;
		background-repeat: no-repeat;
		background-size: cover;
		-webkit-background-size: cover;
		-o-background-size: cover;
		background-position: center 0;
	}

	.snedData {
		display: flex;
		background-color: #ffffff;
		height: 8vh;
		justify-content: center;

		input {
			background: #ffffff;
		}
	}

	.chastConeter {
		height: 84vh;
		overflow: scroll;
		padding: 20rpx;
		background: #d6d6d6;

		.information {
			.boxconet {
				display: flex;
			}

			display: flex;

			.txt {
				max-width: 75vw;
				min-width: auto;
				padding: 16rpx;
				margin: 10rpx;
				background-color: #ffffff;
				border-radius: 20rpx;
				word-break: break-all;
				word-wrap: break-word;
				// box-shadow: -34px 34px 68px #e2e2e2, -18px 20px 68px #f4f4f4;
			}

			.msg_img {
				margin: 10rpx;
				min-width: 25vw;
				min-height: 15vh;
			}
		}

		.myisend {
			justify-content: flex-end;
		}

		.mysned {
			justify-content: flex-end;
		}

		text {
			text-align: center;
		}
	}

	.hader {
		display: flex;
		height: 8vh;
		border-bottom: 1px solid #ccc;
		background: #ebebeb;
		box-shadow: -7px -2px 10px #a5a5a5, 0px 0px 10px #ffffff;

		view:nth-child(1) {
			.centered();
			width: 10%;
		}

		view:nth-child(2) {
			.centered();
			width: 80%;
		}

		view:nth-child(3) {
			.centered();
			width: 20%;
		}

		.sendData {
			.centered();
			width: 80%;
		}

		.inco {
			.centered();
			width: 10%;
		}
	}

	image {
		border-radius: 10rpx;
		width: 68rpx;
		height: 68rpx;
	}
</style>
